import {exeControlCommand} from "@/api/setting"
import {CCard} from "@/components/card"
import {IconImg} from "@/components/images"
import {View, Switch, RootPortal, Button, Image} from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useState} from "react"
// import { AtForm, AtSwitch } from 'taro-ui'
// import btnControll from './btnControlls'
import "./btnControlls.scss"

export const ControllBtn: React.FC<{controll: Setting.DevControll}> = ({
	controll,
	children,
	rainwaterChecked,
	setRainwaterCheckedFunc,
	sewageChecked,
	setRainwaterChecked,
	setSewageChecked,
	setOneSwitchStatus,
	oneSwichStatus,
	oneOrTwoSwitch,
	isSwitchOrBtn,
	isOnlyOpenCardState,
	onlyOpenCardClick
}): JSX.Element => {
	enum ControllImgNameMap {
		"0210" = "devControll-read",
		"0211" = "devControll-write",
		"0212" = "devControll-turnOn",
		"0213" = "devControll-turnOff"
	}

	function handleControllBtnClick() {
		console.log(isSwitchOrBtn)
		//
		if (isSwitchOrBtn) {
			switch (controll.controlCode) {
				case "0213":
					Taro.showModal({
						title: "确认是否关闭",
						success(res) {
							console.log("close success", res)
							if (res.confirm) {
								runControll()
							}
						}
					})
					break
				case "0210":
				case "0211":
				case "0212":
				default:
					runControll()
					break
			}
		} else {
			console.log("按钮")
		}
	}

	function runControll() {
		if (controll.funName != "雨水控制" && controll.funName != "污水控制") {
			Taro.showLoading({
				title: "执行中..."
			})
			// setTimeout(() => {
			//   Taro.hideLoading()
			// }, 1000)
			exeControlCommand({controlId: controll.controlId})
				.then(res => {
					Taro.hideLoading()
					if (res.msg) {
						Taro.showModal({
							content: res.msg
						})
					}
				})
				.catch(err => {
					if (err && err.msg) {
						Taro.showModal({
							content: err.msg
						})
					}
					Taro.hideLoading()
				})
		} else {
			// Taro.showLoading({
			//   title: '执行中...'
			// })
			// setTimeout(()=>{
			//   Taro.hideLoading()
			// },2000)
		}
	}

	// const [rainwaterChecked,setRainwaterChecked] = useState(true)

	// let rainwaterChecked = true

	// function switchChange(){
	//   // let checked = !rainwaterChecked
	//   // setRainwaterChecked(checked)

	//   Taro.showLoading({
	//     title: '执行中'
	//   })
	//   // Taro.showLoading({
	//   //   title: '正在关闭'
	//   // })
	//   setTimeout(()=>{
	//     Taro.hideLoading()
	//   },2000)
	//   console.log(11111);

	// }

	// 开关的开关事件函数
	function switchChange() {
		Taro.showModal({
			title: "提示",
			content: `确定要关闭${rainwaterChecked ? "雨水" : "污水"}控制并且开启${
				rainwaterChecked ? "污水" : "雨水"
			}控制吗？`,
			success(result) {
				if (result.confirm) {
					setRainwaterCheckedFunc()
				} else if (result.cancel) {
					/* 先取反，触发页面render渲染函数，然后再将 */
					setRainwaterChecked(!rainwaterChecked)
					setSewageChecked(!sewageChecked)
					setRainwaterChecked(rainwaterChecked)
					setSewageChecked(sewageChecked)
				}
			}
		})
	}

	// 弹窗取消事件函数
	function modelCancel() {
		showTwoSwitchFunc()
	}

	function showTwoSwitchFunc() {
		let reSwitch = <></>
		// if(controll.funName=="雨水控制" && rainwaterChecked){
		//   re = showSwitchTrue()
		// }else if(controll.funName=="雨水控制" && !rainwaterChecked){
		//   re = showSwitchFalse()
		// } else if(controll.funName=="污水控制" && rainwaterChecked){
		//   re = showSwitchFalse()
		// }else{
		//   re = showSwitchTrue()
		// }

		if (controll.funName == "雨水控制" && rainwaterChecked && !sewageChecked) {
			reSwitch = showSwitchTrue()
		} else if (controll.funName == "雨水控制" && !rainwaterChecked && sewageChecked) {
			reSwitch = showSwitchFalse()
		} else if (controll.funName == "污水控制" && !rainwaterChecked && sewageChecked) {
			reSwitch = showSwitchTrue()
		} else if (controll.funName == "污水控制" && rainwaterChecked && !sewageChecked) {
			reSwitch = showSwitchFalse()
		} else if (controll.funName == "雨水控制" && rainwaterChecked && sewageChecked) {
			reSwitch = showSwitchTrue()
		} else if (controll.funName == "污水控制" && rainwaterChecked && sewageChecked) {
			reSwitch = showSwitchTrue()
		} else if (controll.funName == "雨水控制" && !rainwaterChecked && !sewageChecked) {
			reSwitch = showSwitchFalse()
		} else if (controll.funName == "污水控制" && !rainwaterChecked && !sewageChecked) {
			reSwitch = showSwitchFalse()
		}
		return reSwitch
	}

	function showSwitchTrue() {
		return (
			<Switch
				className="statusSwitch rainwaterOrSewage"
				onChange={switchChange}
				style={{width: "40px", height: "20px"}}
				checked
			/>
		)
	}
	function showSwitchFalse() {
		return (
			<Switch
				className="statusSwitch rainwaterOrSewage"
				onChange={switchChange}
				style={{width: "40px", height: "20px"}}
			/>
		)
	}

	function showOneSwitchFunc() {
		console.log(oneSwichStatus)

		if (oneSwichStatus) {
			return (
				<View>
					<Switch
						className="statusSwitch rainwaterOrSewage"
						onChange={switchOneChange}
						style={{width: "40px", height: "20px"}}
						checked
					/>
				</View>
			)
		} else {
			return (
				<View>
					<Switch
						className="statusSwitch rainwaterOrSewage"
						onChange={switchOneChange}
						style={{width: "40px", height: "20px"}}
					/>
				</View>
			)
		}
	}

	function switchOneChange(e) {
		console.log(e)
		setOneSwitchStatus(!oneSwichStatus)
		// setOneSwitchStatus(!oneSwichStatus)
		setRainwaterCheckedFunc()
		// setOneSwitchStatus(!oneSwichStatus)
	}

	function showBtnFunc() {
		return (
			<button
				onClick={() => {
					onlyOpenCardClick(controll)
				}}
			>
				<Image
					className="qd_img"
					src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/yqd.png"
				></Image>
				{/* <Image
          className="qd_img"
          src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/dqd.png"
        ></Image> */}
				启动
				{/* <div className="svg-wrapper-1"></div>
        <span>Send</span> */}
			</button>
		)
	}

	return (
		<CCard onClick={handleControllBtnClick} style={{position: "relative"}}>
			{children
				? children
				: [
						<View>
							<IconImg imgName={ControllImgNameMap[controll.controlCode]}></IconImg>
						</View>,

						<View className="hanzi text-14 font-bold mb-2 truncate">
							{controll.funName}
							{/* 氨氮 */}
						</View>,
						// <View className="hanzi text-14 text-xx_text truncate">
						//   {controll.controlDesc}
						// </View>

						// <View>{isSwitchOrBtn.toString()}</View>,
						<View>
							{/* { oneOrTwoSwitch ? showOneSwitchFunc() : showTwoSwitchFunc()} */}
							{isSwitchOrBtn
								? oneOrTwoSwitch
									? showOneSwitchFunc()
									: showTwoSwitchFunc()
								: showBtnFunc()}
						</View>
				  ]}
		</CCard>
	)
}
